// @flow
import React, { Component, Fragment } from 'react';
import './ClassifyItem.scss';
import OutsideClickHandler from 'react-outside-click-handler';

import { IoIosFolder, IoIosFolderOpen } from 'react-icons/io';
import Editable from 'components/Common/Editable';

type Props = {
    data: any,
    isLeaf: boolean,
    isOpen: boolean,
    nodeType: string,
    EditableIds: Array<string>,
    icon?: any,
    nodeItemType: string,
    editableInputRef: Element,
    onClassifyEditorOutSideClick(id: string): void,
    onEditablItemChange(id: string): void,
    onEditableItemDoubleClick(id: string): void,
    onNodeClick(id: string): void
};

const ClassifyItem = ({
    data,
    icon,
    isOpen,
    isLeaf,
    nodeType,
    nodeItemType, //leaf-parallet
    EditableIds,
    editableInputRef,
    onClassifyEditorOutSideClick,
    onEditableItemDoubleClick,
    onEditablItemChange,
    onNodeClick
}: Props) => {
    return (
        <div className="classify-node-item">
            <div
                id={`classifyItem_${nodeType}_${data.id}`}
                className="classify-node-icon"
                style={{ width: '2rem' }}
                onClick={e => {
                    onNodeClick(e.target.id.split('_')[2]);
                }}
            >
                {isLeaf === true ? (
                    icon[nodeItemType]
                ) : isOpen === true ? (
                    <IoIosFolderOpen />
                ) : (
                    <IoIosFolder />
                )}
            </div>
            <OutsideClickHandler
                onOutsideClick={e => {
                    onClassifyEditorOutSideClick(e);
                }}
            >
                <Editable
                    id={data.id}
                    editType={'classifyItem'}
                    EditableIds={EditableIds}
                    value={data.title}
                    onEditablItemChange={onEditablItemChange}
                    onEditableItemDoubleClick={onEditableItemDoubleClick}
                    editableInputRef={editableInputRef}
                />
            </OutsideClickHandler>
        </div>
    );
};
ClassifyItem.defaultProps = {
    icon: {
        parallet: null,
        nonRelation: null,
        flowRelation: null
    }
};
export default ClassifyItem;
